<template>
  <div>
    <div class="oneStationInfo" :style="{left: tipDatas.width + '%',top: tipDatas.height + '%'}">
      <div class="oneStationInfoDetail">
        <div class="oneStationInfoDetailBackground">
          <div class="diamondRight">
            <div class="quadrilateral"></div>
            <div class="diamond"></div>
          </div>
          <div class="quadrilateral"></div>
          <div class="diamondLeft">
            <div class="quadrilateral"></div>
            <div class="diamond"></div>
          </div>
          <div class="borderLeft" style="height: 160px;position: absolute;z-index: 250;top:0;left:0;"></div>
          <div class="borderTop" style="width: 300px;position: absolute;z-index: 250;top:0;left:0;"></div>
          <div class="borderRight" style="height: 160px;position: absolute;z-index: 250;bottom:0;right:0;"></div>
          <div class="borderBottom" style="width: 300px;position: absolute;z-index: 250;bottom:0;right:0;"></div>
          <div class="frameBorderTop"></div>
          <div class="frameBorderBottom"></div>
        </div>
        <div class="oneStationInfoDetailContent">
          <Row
            style="padding:0 0 5px 0;border-bottom:1px solid rgba(142,233,255,0.30);height: 40px;line-height: 40px;color: #FB943A;">
            <i-col span="20">
              <span style="font-size: 20px;">{{tipDatas.pointName}}</span>
            </i-col>
            <i-col span="4" style="text-align: right;cursor:pointer;">
              <Icon type="close-round" size="20" color="#69A3C6" style="margin-top: 5px;"
                    @click="closeComponent()"></Icon>
            </i-col>
          </Row>
          <Row class="infoDetailRow">
            <i-col span="10">到达列车数</i-col>
            <i-col span="14" class="right_word">{{tipDatas.sendCount}} 列</i-col>
          </Row>
          <Row class="infoDetailRowBackfround">
            <i-col span="10">发出列车数</i-col>
            <i-col span="14" class="right_word">{{tipDatas.arriveCount}} 列</i-col>
          </Row>
          <Row class="infoDetailRow">
            <i-col span="10">到达货物量</i-col>
            <i-col span="14" class="right_word">{{tipDatas.sendWeight}} 万吨</i-col>
          </Row>
          <Row class="infoDetailRowBackfround">
            <i-col span="10">发出货物量</i-col>
            <i-col span="14" class="right_word">{{tipDatas.sendWeight}} 万吨</i-col>
          </Row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'tipComponment',
    props: {
      tipDatas: {},
      params: {}
    },
    data () {
      return {}
    },
    methods: {
      closeComponent () {
        this.$emit('closeComponent')
      }
    }
  }
</script>

<style scoped>

  /*单个站点弹出框*/
  .oneStationInfo {
    width: 328px;
    height: 190px;
    position: absolute;
    top: 150px;
    left: 50%;
    z-index: 999;
    margin-left: -328px;
    text-align: left;
  }

  .oneStationInfo .oneStationInfoDetail {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground {
    width: 100%;
    height: 100%;
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .diamondRight {
    width: 100%;
    height: 15%;
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .diamondRight .diamond {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 210;
    border-bottom: 28.5px solid #43657C;
    border-right: 28.5px solid transparent;
    height: 0;
    width: 100%;
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .diamondRight .quadrilateral {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 220;
    width: 90%;
    height: 15%;
    background-image: linear-gradient(-90deg, rgba(67, 101, 124, 1), rgba(32, 53, 70, 1));
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .quadrilateral {
    width: 100%;
    height: 70%;
    background-image: linear-gradient(-90deg, rgba(67, 101, 124, 1), rgba(32, 53, 70, 1));
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .diamondLeft {
    width: 100%;
    height: 15%;
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .diamondLeft .diamond {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 210;
    border-top: 28.5px solid #203546;
    border-left: 28.5px solid transparent;
    height: 0;
    width: 100%;
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .diamondLeft .quadrilateral {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 220;
    width: 90%;
    height: 15%;
    background-image: linear-gradient(-90deg, rgba(67, 101, 124, 1), rgba(32, 53, 70, 1));
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .frameBorderTop {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 300;
    width: 34px;
    height: 34px;
    background: url("../../../../../static/img/img_ydangle.png") no-repeat;
    background-size: cover;
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .frameBorderBottom {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 300;
    width: 34px;
    height: 34px;
    background: url("../../../../../static/img/img_zdangle.png") no-repeat;
    background-size: cover;
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailContent {
    width: 100%;
    height: 100%;
    padding: 10px 30px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 400;
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailContent .infoDetailRow {
    margin: 3px 0;
    padding: 2px 0;
    font-size: 14px;
    color: #FFFFFF;
    background-image: linear-gradient(90deg, rgba(27, 47, 67, 0.00) 0%, rgba(255, 255, 255, 0.20) 100%);
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailContent .infoDetailRowBackfround {
    padding: 5px 0;
    font-size: 14px;
    color: #FFFFFF;
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailContent .right_word {
    text-align: right;
    padding-right: 3px;
  }

  /*边框*/
  .borderTop {
    border-top-width: 1px;
    border-top-style: solid;
    border-image: -webkit-linear-gradient(90deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    border-image: -moz-linear-gradient(90deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    border-image: linear-gradient(90deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
  }

  .borderLeft {
    border-left-width: 1px;
    border-left-style: solid;
    border-image: -webkit-linear-gradient(180deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    border-image: -moz-linear-gradient(180deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    border-image: linear-gradient(180deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
  }

  .borderRight {
    border-right-width: 1px;
    border-right-style: solid;
    border-image: -webkit-linear-gradient(180deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    border-image: -moz-linear-gradient(180deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    border-image: linear-gradient(180deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
  }

  .borderBottom {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-image: -webkit-linear-gradient(90deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    border-image: -moz-linear-gradient(90deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    border-image: linear-gradient(90deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
  }

</style>
